<template>
  <div class="v-slot-input">
    <el-input
      v-model="formattedInputValue"
      class="_input_inputValue"
      :disabled="true"
    ></el-input>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, computed } from "vue";
import { InstanceSlotData, SlotValue } from "../../types";
import { SlotEditKey } from "@/constants/constants";
import { formatScientificNumber } from "@/util/common";
import { modelService } from "@/modules/model/service";

/**
 * 单行输入框
 */
const props = defineProps<{
  instanceId: string;
  projectId: string;
  slotData: InstanceSlotData;
  slotValue: SlotValue | undefined | null;
  slotKey: SlotEditKey;
  readonly?: boolean;
  isMultiplicity?: boolean;
  nullable?: boolean;
}>();

let inputValue = ref<string>(props.slotValue?.value as string);

const formatScientificConfig: any = ref({});
const formattedInputValue = computed(() => {
  return formatScientificNumber(inputValue.value, formatScientificConfig.value);
});

const PROPERTY_KEYS = {
  scientificNotation: "Customization::DataPrecision-scientificNotation",
  precisionLimit: "Customization::DataPrecision-precisionLimit",
  precision: "Customization::DataPrecision-precision"
};

watch(
  () => props.slotValue?.value,
  async newVal => {
    // step1
    const typePropertyRow = await modelService.getModelPropertiesByKeys(
      props.projectId,
      props.slotData.propertyId,
      Object.values(PROPERTY_KEYS)
    );

    const typePropertyRowMap = Object.fromEntries(typePropertyRow.map(({ key, value }) => [key, value]));

    formatScientificConfig.value = Object.fromEntries(
      Object.entries(PROPERTY_KEYS).map(([name, key]) => [name, typePropertyRowMap[key] ?? null])
    );
    // step2
    inputValue.value = newVal as string;
  },
  { immediate: true }
);
</script>
<style lang="scss">
.v-slot-input {
  display: flex;
  flex-wrap: nowrap;
  height: auto;
  width: auto;
  background-color: none;
  .el-input.is-disabled .el-input__inner {
    background-color: transparent;
    cursor: default;
  }
  .el-input__wrapper {
    background-color: inherit;
  }
  .el-input.is-disabled .el-input__wrapper {
    background-color: transparent;
    box-shadow: none;
  }
}
</style>
